<template>
	<skeleton :skeleton="{name:'study'}" :showSkeleton="showSkeleton">
		<block slot="content">
			<view>
				<v-banner :bannerList="res.bannerList"></v-banner>
				<v-learn :learnList="res.hotList"></v-learn>
				<v-text :textList="res.studyList"></v-text>
				<v-elaboration :elaborationList="res.eliteList"></v-elaboration>
				<v-statute :statuteList="res.lawList"></v-statute>
				<v-video :videoList="res.courseList"></v-video>
			</view>
		</block>
	</skeleton>
</template>

<script>
	import {
		rangeArray
	} from "@/utils/index";
	import vBanner from "./review/fragment/vbanner/index";
	import vLearn from "./review/fragment/vlearn/index";
	import vVideo from "./review/fragment/vvideo/index";
	import vElaboration from "./review/fragment/velaboration/index";
	import vText from "./review/fragment/vtext/index";
	import vStatute from "./review/fragment/vstatute/index";
	import baseService from "@/services/study/index.js";
	const service = new baseService();

	export default {
		components: {
			vBanner,
			vLearn,
			vVideo,
			vElaboration,
			vText,
			vStatute
		},
		data() {
			return {
				messageBadgeIndex: 2,
				showSkeleton: true,
				res: {},
				learnList: [
					{id:'1',img: './1.png',title: '11',userHeader:'./1.png',userName:'11',readVolume:'11'}
				],
				elaborationList: []
			};
		},
		created() {
			this.loadData();
		},
		methods: {
			loadData() {
				service.queryStudyHome().then(res => {
					if (res.success) {
						this.res = res.result
					}
				}).then(() => {
					this.showSkeleton = false
					uni.stopPullDownRefresh()
				});
			}
		}
	};
</script>

<style lang="less">
	page {
		background-color: #f8f8f8;
	}
</style>
